<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.demo{
				width: 200px;
				height: 200px;
				background-color: pink;
				text-align: center;
				/* 单行文字垂直居中：设置行高 与 高度一样 */
				line-height: 200px;
				/* border-radius: 50%; */
				/* border: 1px solid black; */
			}
		</style>
	</head>
	<body>
		 <div class="demo">点我试试</div>
		 <script> 
		 // 事件处理程序使用this关键字 代表事件目标
			 var demo = document.querySelector(".demo")
			 demo.onclick = function(){
				 this.style.borderRadius = "50%"
				 this.style.border = "1px solid black"
				 this.innerText = "大哥我服了，别点了"
			 }
		 </script>
	</body>
</html>
		<!-- 
		1、DOM : js基础代码 + DOM + BOM   就是操作页面的（数据）代码
		2、DOM能干啥：
			- 获取标签（获取数据）
			- 操作标签内容
			- 操作标签的属性
			- 操作标签的样式
			- 操作标签的事件
		 -->
